import { createVNode, render } from 'vue'
import XtxConfirm from './xtx-confirm.vue'

// 封装函数调用组件步骤
// 1、引用组件、以及createVNode, render方法
// 2、利用createVNode把组件转变成虚拟节点
// 3、准备div容器装组件虚拟节点
// 4、利用render函数将组件虚拟节点装成div容器

const div = document.createElement('div')
div.setAttribute('class', 'xtx-confirm-container')
document.body.appendChild(div)

// 参数时组件所需传递的值
export default ({ title, text }) => {
  // 利用new Promise返回一个promise对象，根据点击取消、确定等不同按钮，触发resolve,reject,让使用者根据点击按钮状态进行不同操作
  return new Promise((resolve, reject) => {
    // 点击取消的函数
    const cancelCallback = () => {
      // 容器不装东西
      render(null, div)
      // 返回取消状态
      reject(new Error('点击取消'))
    }
    // 点击确定的函数
    const submitCallback = () => {
      // 容器不装东西
      render(null, div)
      // 返回确定状态
      resolve()
    }
    // 将组件虚拟节点装入容器
    const vn = createVNode(XtxConfirm, { title, text, cancelCallback, submitCallback })
    render(vn, div)
  })
}
